<template>
  <div class="login">
    <!-- 头部 -->
    <div class="backgroundcolor">
      <div class="header">
        <div class="headerbox" @click="goback">
          <img src="../assets/img/login-03.png" alt="" />
        </div>
      </div>
      <div class="header-top">
        <img src="../assets/img/login-02.png" alt="" class="left80" />
      </div>
    </div>
    <!-- 隔层 -->
    <div style="width: 100%; height: 45px"></div>
    <!-- 登录 -->
    <form class="login-content" name="loginForm">
      <!-- phone -->
      <div class="phone">
        <div class="phonebox">
          <span>
            <img src="../assets/login/login-01.png" alt="" />
          </span>
          <input
            type="text"
            placeholder="手机号码"
            v-model="state.tel"
            minlength="11"
            maxlength="11"
            @blur="checkingState(state.tel)"
            @input="inputValue"
            @click.stop="show = true"
          />
          <i @click="check">获取验证码</i>
        </div>
        <van-number-keyboard
          v-model:show="show"
          @blur="show = false"
          @input="onInput"
          @delete="onDelete"
        />
      </div>
      <!-- 验证 -->
      <div class="phone">
        <div class="phonebox">
          <span>
            <img src="../assets/login/login-02.png" alt="" />
          </span>
          <van-cell-group inset>
            <van-field
              v-model="state.sms"
              center
              placeholder="验证码"
              maxlength="4"
              @click.stop="showSms = true"
            >
            </van-field>
          </van-cell-group>
          <van-number-keyboard
            v-model:show="showSms"
            @blur="showSms = false"
            @input="onInputSms"
            @delete="onDeleteSms"
          />
        </div>
      </div>
      <!-- 登录 -->
      <div class="login-btn">
        <div class="login-btn-middle">
          <button @click.prevent="goLogin">登录</button>
        </div>
      </div>
      <!-- 协议 -->
      <div class="agreement">
        <span>
          <input type="checkbox" id="agree" />
        </span>
        <span style="font-size: 13px">勾选并同意</span>
        <a href="#">
          <span style="color: #ef4c55; font-size: 13px"
            >《巴乐兔隐私与服务协议》</span
          >
        </a>
      </div>
    </form>
  </div>
</template>

<script>
import { reactive, ref } from "vue";
import { Toast } from "vant";
import axios from "axios";

import { useStore } from "vuex";

import { useRouter } from "vue-router";

let path;

export default {
  beforeRouteEnter(to, from) {
    path = from.path;
    // console.log(from.path);
    if (path == "/") {
      path = "/home/index";
    }
    // console.log(path);
  },
  setup() {
    const state = reactive({
      tel: "",
      sms: "",
    });

    const store = useStore();
    const router = useRouter();

    const post = (url, data) => {
      return new Promise((resolve) => {
        return axios
          .post(url, data)
          .then((response) => {
            resolve(response);
          })
          .catch((err) => {
            Toast.log(err);
          });
      });
    };

    const check = () => {
      const reg = /^1[3|4|5|6|7|8|9]\d{9}$/;
      if (!state.tel) {
        return Toast.fail("输入手机号方可发送验证码!");
      }
      if (reg.test(+state.tel)) {
        Toast.success("验证码已发送，请您注意查收!");
        post("http://www.pudge.wang:4000/register/getCode", {
          templateId: "537707",
          phone: state.tel,
        });
      } else {
        return Toast.fail("手机号格式有误，请修改");
      }
    };

    const checkingState = (tel) => {
      if (!/^1[3456789]\d{9}$/.test(tel)) {
        Toast.fail("手机号格式有误,请修改!");
      } else {
        store.dispatch("getUserDataAsync", tel);
      }
    };

    const goLogin = () => {
      if (!/^1[3456789]\d{9}$/.test(+state.tel)) {
        return Toast.fail("手机号输入有误!");
      }
      if (!/^\d{4}$/.test(+state.sms)) {
        return Toast.fail("验证码格式有误!");
      }
      console.log(document.querySelector("#agree").checked);
      if (!document.querySelector("#agree").checked) {
        return Toast.fail("请勾选隐私和服务协议");
      }
      if (store.state.loginState) {
        router.replace(path);
        Toast.success("登录成功,欢迎回来");
        document.querySelector("#agree").style.checked = false;
      } else {
        store.dispatch("addUserInfoAsync", state.tel);
        router.replace(path);
        Toast.success("新用户,欢迎来到巴乐兔");
        document.querySelector("#agree").style.checked = false;
      }
    };

    // 手机号输入单号检测
    const inputValue = () => {
      if (/\D/g.test(state.tel)) {
        state.tel = state.tel.replace(/\D/g, "");
      }
    };

    const goback = () => {
      router.replace(path);
    };

    const show = ref(false);
    const onInput = (value) => {
      if (state.tel.length < 11) {
        // console.log(state.tel.length);
        state.tel += value;
      }
    };

    const onDelete = () => {
      state.tel = state.tel
        .split("")
        .slice(0, state.tel.split("").length - 1)
        .join("");
    };

    const showSms = ref(false);
    const onInputSms = (value) => {
      if (state.sms.length < 4) {
        // console.log(state.sms.length);
        state.sms += value;
      }
    };

    const onDeleteSms = () => {
      state.sms = state.sms
        .split("")
        .slice(0, state.sms.split("").length - 1)
        .join("");
    };

    return {
      state,
      check,
      checkingState,
      goLogin,
      inputValue,
      goback,
      onInput,
      onDelete,
      show,
      showSms,
      onInputSms,
      onDeleteSms,
    };
  },
};
</script>

<style lang="less">
.login {
  .backgroundcolor {
    background-image: linear-gradient(90deg, #ff8084 10%, #ff9696 90%);
    width: 100%;
  }
  .header {
    height: 45px;

    .headerbox {
      width: 48px;
      height: 48px;
      position: relative;
      img {
        display: block;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 20px;
        height: 20px;
      }
    }
  }
  .header-top {
    height: 160px;
    position: relative;
    img {
      position: absolute;
      left: 50%;
      top: 0;
      transform: translateX(-50%);
      width: 170px;
      height: 67px;
    }
  }
  .login-content {
    width: 100%;
    padding: 25px 9% 15px;
    .phone {
      margin-bottom: 20px;
      width: 100%;
      .phonebox {
        width: 100%;
        height: 44px;
        margin-bottom: 14px;
        background: #e2e2e2;
        border-radius: 22px;
        position: relative;
        i {
          font-size: 14px;
          float: right;
          line-height: 44px;
          margin-right: 15px;
          color: rgb(239, 76, 85);
        }
        span {
          display: inline-block;
          width: 44px;
          height: 44px;
          position: relative;
          img {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 22px;
          }
        }
        input {
          border: none;
          width: 200px;
          height: 32px;
          position: absolute;
          left: 44px;
          top: 50%;
          transform: translateY(-50%);
          background: transparent;
          font-size: 15px;
          color: #5f6162;
        }
      }
    }
    // log-btn
    .login-btn {
      width: 100%;
      height: 110px;
      padding-top: 60px;
      .login-btn-middle {
        width: 134px;
        margin: auto;
        button {
          height: 40px;
          width: 100%;
          border: none;
          margin: 0;
          padding: 0;
          background: #bdbdbe;
          border-radius: 25px;
          color: #fff;
          font-size: 16px;
        }
      }
      .login-btn-middle:hover button {
        background-image: linear-gradient(90deg, #ff8084 20%, #ff9696 80%);
      }
    }
    // agreement
    .agreement {
      width: 100%;
      height: 17px;
      margin-top: 34px;
      text-align: center;
      line-height: 17px;

      span {
        // vertical-align: middle;
        input {
          display: inline-block;
          vertical-align: bottom;
          width: 15px;
          height: 15px;
          margin-right: 5px;
        }
      }
    }
  }
}
.login .van-cell-group {
  width: 250px;
  height: 32px;
  margin: 0 0;
  position: absolute;
  left: 44px;
  top: 50%;
  background: transparent;
  transform: translateY(-50%);
  .van-cell {
    border: none;
    width: 100%;
    height: 100%;
    background: transparent;
    font-size: 15px;
    color: #5f6162;
    padding: 0 0;
    .van-cell__title,
    .van-cell__value {
      width: 100%;
      height: 100%;
    }
    .van-cell-title {
      span {
        display: none;
      }
    }
    .van-cell__value {
      position: relative;
      .van-field__body {
        width: 100%;
        height: 100%;
      }
      .van-field__body > .van-field__control {
        position: absolute;
        left: 0;
      }
      .van-field__button {
        position: absolute;
        width: 100px;
        right: 0px;
        top: 0;
        .van-button__text {
          width: auto;
          white-space: nowrap;
          line-height: 44px;
          color: red;
          font-size: 14px;
          background: transparent;
        }
      }
    }
  }
}
.login /deep/ .van-field__control {
  font-size: 15px;
  color: #5f6162;
}
.van-field__body .van-field__control::-webkit-input-placeholder {
  color: #5f6162;
}
</style>
